<template>
  <view class="container">
    <view class="form-item">
      <text class="label">昵称</text>
      <input class="input" v-model="form.name" placeholder="请输入昵称"/>
    </view>
    <view class="form-item">
      <text class="label">手机号</text>
      <input class="input" v-model="form.mobile" placeholder="请输入昵称"/>
    </view>

    <view class="form-item">
      <text class="label">个性签名</text>
      <textarea
          class="textarea"
          v-model="form.signature"
          placeholder="请输入个性签名"
          maxlength="100"
          auto-height
      />
      <text class="word-count">{{ form.signature.length }}/100</text>
    </view>

    <button class="save-btn" @click="handleSave">
      保存修改
    </button>
  </view>
</template>

<script>
import {editUserInfo_API, getUserInfo_API} from '../../api/login'

export default {
  data() {
    return {
      form: {
        name: "",
        mobile: "",
        gender: 0,
        signature: "",
      },
    };
  },
  onLoad() {
    // 获取用户信息
    this.loadUserProfile();
  },
  methods: {
    loadUserProfile() {
      this.form = JSON.parse(uni.getStorageSync("USER-INFO"))
    },
    async handleSave() {
      if (!this.form.name.trim()) {
        uni.showToast({
          title: "昵称不能为空",
          icon: "none",
        });
        return;
      }

      uni.showLoading({
        title: "保存中...",
      });
      //编辑
      await editUserInfo_API(this.form)
      // 重新获取用户信息
      const res = await getUserInfo_API();
      if (res) {
        uni.setStorageSync("USER-INFO", JSON.stringify(res));
      }
      uni.showToast({
        title: "修改成功",
        icon: "success",
      });
      this.$to('/pages/my/index', false, "tabbar")
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20rpx 30rpx;
}

.form-item {
  margin-bottom: 40rpx;
  border-bottom: 1rpx solid #f5f5f5;
  padding-bottom: 20rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.input,
.textarea {
  width: 100%;
  font-size: 32rpx;
  padding: 10rpx 0;
}

.picker {
  width: 100%;
}

.picker-text {
  font-size: 32rpx;
  padding: 10rpx 0;
}

.textarea {
  min-height: 150rpx;
  line-height: 1.5;
}

.word-count {
  display: block;
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.save-btn {
  margin-top: 60rpx;
  width: 100%;
  border-radius: 50rpx;
  color: #fff;
  background-color: #4db366;
}
</style>
